<template>
  <div class="container">
    <!-- 导航条 -->
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()" />
    <!-- 搜索框 -->
    <van-search
      v-model.trim="keyword"
      shape="round"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />
    <!-- 关键词 -->
    <van-cell-group class="suggest-box" v-if="keyword">
      <!-- span高亮联想关键词 -->
      <van-cell
        v-for="(sug, index) in suggestList"
        :key="index"
        icon="search"
        @click="onSearch(sug.replace(`<span>${keyword}</span>`, keyword))"
        ><p v-html="sug"><span>j</span>ava</p></van-cell
      >
    </van-cell-group>
    <!-- 搜索的历史记录 -->
    <div class="history-box" v-else>
      <div class="head">
        <span>历史记录</span>
        <!-- 删除全部历史记录 -->
        <van-icon name="delete" @click="delAllHistory"></van-icon>
      </div>
      <van-cell-group>
        <van-cell v-for="(item, index) in historySearch" :key="index">
          <a class="word_btn">{{ item }}</a>
          <!-- 删除单个历史记录 -->
          <van-icon
            class="close_btn"
            slot="right-icon"
            name="cross"
            @click="delSingleHistory(index)"
          />
        </van-cell>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { suggestApi } from '@/api/articleAPI.js'
/**
  * 存储用户的 关键词搜索行为
  * 1.设计数据结构['字符串]
  * 2.存储到本地的key名 TT_HISTORY_SEARCH
 */
const TT_HISTORY_SEARCH = 'TT_HISTORY_SEARCH'
// 先存到本地 造假数据
// localStorage.setItem(TT_HISTORY_SEARCH, JSON.stringify(['搜索内容', '小米', '京东', 1, 2, 3, 4, 5, 6, 7, 8, 9]))
export default {
  name: 'search-index',
  data () {
    return {
      keyword: '',
      historySearch: JSON.parse(localStorage.getItem(TT_HISTORY_SEARCH)) || ['无搜索记录'],
      // 设置定时器
      timer: null,
      suggestList: []
    }
  },
  watch: {
    // 侦听搜索框里的关键词变化===>高频触发调用接口===>用防抖
    keyword (newValue, oldValue) {
      // 1.判断定时器是否已经生成
      this.timer && clearTimeout(this.timer)
      // 2.定义定时器
      this.timer = setTimeout(async () => {
        // console.log('侦听器handler触发了')
        try {
          // 根据后台请求出错: 关键字不能为空做出响应
          if (!this.keyword) {
            //  如果关键字为空则:
            this.suggestList = []
            return
          }
          // 通过关键字发送 建议次接口
          const { data } = await suggestApi(this.keyword)
          console.log('建议词:', data)
          this.suggestList = data.options
          // 在判断options返回的是不是null===>后台脏数据: 输入小米关键字了,还返回null!
          if (!data.options[0]) return
          /**
           * 1.给关键字替换为标签 高亮标红
           * 2.给所有字母转换为小写,在把关键字符串替换为标签字符串
           * 3. es10的语法; ? ===>来加强代码的健壮性 考虑到不存在 后面也不会报错
           */
          this.suggestList = this.suggestList.map(word => word.toLowerCase().replace(this.keyword, `<span>${this.keyword}</span>`))
          // console.log(this.suggestList)
        } catch (error) {
          console.dir(error)
        }
      }, 500)
    }
  },
  methods: {
    // 搜索内容事件的回调
    onSearch (iptValue) {
      // 先判断用户是否输入了关键字===>才指向跳转与记录操作
      if (!iptValue) return
      /**
       * 1.存储关键字===>排除重复的(重复的不添加)
       * 2.携带关键字跳转路由到对应的组件
       */
      // 先判断关键字在历史记录中是否重复===>利用Set构造函数
      const distinctHistoryList = new Set(this.historySearch) // ===>返回一个实例对象
      // 利用add方法给Set实例对象添加值 ===> 值会添加不重复的值
      distinctHistoryList.add(iptValue) // 把对象转换为数组重新赋值给 历史搜索 1.Array.from(对象)  2.[...对象]
      this.historySearch = [...distinctHistoryList]
      // 再存入本地
      localStorage.setItem(TT_HISTORY_SEARCH, JSON.stringify(this.historySearch))
      // 然后把关键词(查询啊参数)带入路由跳转到result组件中
      this.$router.push(`/search/result?q=${iptValue}`)
    },
    // 删除单个历史记录
    delSingleHistory (index) {
      // 1.软删(假删除) ===>(存在硬盘的没删除)刷新一下又回来了
      this.historySearch.splice(index, 1)
      // 2.硬删===>把内存的也删除
      localStorage.setItem(TT_HISTORY_SEARCH, JSON.stringify(this.historySearch))
    },
    // 删除全部
    delAllHistory () {
      // 1.软删(假删除) ===>(存在硬盘的没删除)刷新一下又回来了
      this.historySearch = []
      // 2.硬删===>把内存的也删除
      localStorage.setItem(TT_HISTORY_SEARCH, JSON.stringify(this.historySearch))
    }
  }
}
</script>

<style scoped lang='less'>
// 关键词样式
.suggest-box {
  /deep/ .van-cell {
    padding: 10px 20px;
    color: #999;
    p {
      span {
        color: red;
      }
    }
  }
}
// 搜索记录样式
.history-box {
  padding: 0 20px;
  .head {
    line-height: 36px;
    color: #999;
    text-align: left;
    .van-icon {
      font-size: 16px;
      float: right;
      margin-top: 10px;
    }
  }
  .van-cell {
    padding: 10px 0;
  }
  .word_btn {
    color: #3296fa;
  }
  .close_btn {
    margin-top: 5px;
    color: #999;
  }
}
</style>
